<template>
    <div class="zzbox" @click="closebox">
        <div class="c_box" @click.stop>
            <div v-if="!cropperShow">
                <div class="updatabox">
                    <v-icon class="mb-3" style="font-size: 60px;">mdi-image</v-icon>
                    <div>选择图片</div>
                    <input type="file" accept="image/*" @change="getFile($event)">
                </div>
                <p style="text-align: center;">请选择大小不超过2M的图片</p>

                <v-btn class="fbtn" color="primary" @click="closebox">取消</v-btn>
            </div>

            <div class="clearfix" v-if="cropperShow">
                <div class="fl" style="height: 480px;width: 480px;">
                    <vueCropper
                            ref="cropper"
                            :img="option.img"
                            :outputSize="option.size"
                            :outputType="option.outputType"
                            :info="true"
                            :full="option.full"
                            :canMove="option.canMove"
                            :canMoveBox="option.canMoveBox"
                            :fixedBox="option.fixedBox"
                            :original="option.original"
                            :autoCrop="option.autoCrop"
                            :autoCropWidth="option.autoCropWidth"
                            :autoCropHeight="option.autoCropHeight"
                            :centerBox="option.centerBox"
                            :high="option.high"
                            :infoTrue="option.infoTrue"
                            :enlarge="option.enlarge"
                            @realTime="realTime"
                    ></vueCropper>
                </div>
                <div class="fr" style="width: 180px;">
                    <h3 class="mb-4">预览</h3>
                    <div class="tx_box_box" v-if="previews" :style="previewStyle3">
                        <div class="tx_box" :style="previews.div">
                            <img :src="previews.url" :style="previews.img">
                        </div>
                    </div>

                    <div class="tx_box_box" v-if="previews" :style="previewStyle3">
                        <div class="tx_box1" :style="previews.div">
                            <img :src="previews.url" :style="previews.img">
                        </div>
                    </div>
                </div>
                <div class="c_btn_box">
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary" @click="cropperShow = false">上一步</v-btn>
                        <v-btn color="primary" @click="cropperImg">确认</v-btn>
                    </v-card-actions>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import VueCropper from 'vue-cropper'

    export default {
        name: 'vue-cropper-photo',
        component: {
            VueCropper
        },
        data () {
            return {
                cropperShow: false,
                option: {
                    img: '', // 裁剪图片的地址
                    info: true, // 裁剪框的大小信息
                    outputSize: 0.8, // 裁剪生成图片的质量
                    outputType: 'jpeg', // 裁剪生成图片的格式
                    canScale: false, // 图片是否允许滚轮缩放
                    autoCrop: true, // 是否默认生成截图框
                    autoCropWidth: 200, // 默认生成截图框宽度
                    autoCropHeight: 200, // 默认生成截图框高度
                    fixedBox: true,
                    infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
                },
                fileData: '',
                previewStyle3: {},
                previews: null,
                blobData: null
            }
        },
        methods: {
            getFile(event) {	//获取本地文件
                // this.fileData = event.target.files[0]
                var reader = new FileReader();
                reader.readAsDataURL(event.target.files[0]);
                reader.onload = (e) => {
                    this.option.img = reader.result
                    this.cropperShow = true
                }
            },
            cropperImg () {
                this.$refs.cropper.getCropBlob(data => {
                    this.blobData = data
                    this.$emit('setImg', data)
                })
            },
            closebox () {
                this.$emit('input', false)
            },
            realTime(data) {
                var previews = data;
                var h = 0.5;
                var w = 0.2;

                this.previewStyle3 = {
                    width: previews.w + "px",
                    height: previews.h + "px",
                    overflow: "hidden",
                    margin: "0",
                    zoom: 120 / previews.w
                };

                this.previews = data;
            },
        }
    }
</script>

<style scoped>
    .zzbox{
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
    }
    .c_box{
        background: #fff;
        width: 700px;
        height: 500px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 10px;
        border-radius: 5px;
    }
    .tx_box{
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #000;
        background: #000;
    }
    .tx_box1{
        overflow: hidden;
        border: 2px solid #000;
        border-radius: 5px;
        background: #000;
    }
    .tx_box_box{
        margin: 20px auto 50px !important;
    }
    .c_btn_box{
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .updatabox{
        width: 300px;
        padding: 40px;
        margin: 0 auto;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-align: center;
        position: relative;
        margin-bottom: 30px;
        margin-top: 100px;
    }
    .updatabox input{
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        cursor: pointer;
    }
    .fbtn{
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
</style>
